<template>
  <view class="XPickerPopup">
    <!-- 选择器弹窗 -->
    <uni-popup
      ref="pickerPopup"
      type="bottom"
      :is-mask-click="false"
      background-color="#ffffff"
      mask-background-color="rgba(0,0,0,0.5)"
    >
      <view class="pickerPopupContentWrap">
        <view class="head">
          <button class="cancel" @click.stop="pickerPopupCancel()">取消</button>
          <text class="title ellipsisText">{{ pickerTitle }}</text>
          <button
            @click.stop="pickerPopupConfirm()"
            :disabled="pickerConfirmDisabled"
            :class="{ confirm: true, disabled: pickerConfirmDisabled }"
          >
            确定
          </button>
        </view>
        <picker-view
          class="pickerContent"
          :indicator-style="'font-size: 16px; height: 43px;'"
          @change="pickChange"
          @pickstart="pickerConfirmDisabled = true"
          @pickend="pickerConfirmDisabled = false"
        >
          <picker-view-column class="pickColumn">
            <view
              :class="{ pickerItem: true, selected: currentPickValue === i }"
              v-for="(item, i) in packerPopupData"
              :key="item.id"
            >
              {{ item.name }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
onLoad(() => {});
const pickerPopup = ref();
const pickerTitle = ref("");
const currentPickValue = ref(0);
const packerPopupData = ref();
const pickerConfirm = ref((v?: any) => {});
const pickerCancel = ref((v?: any) => {});
const pickerConfirmDisabled = ref(false);
function showPickerPopup({ title, columns, confirm, cancel }: IPickerProps) {
  if (title) pickerTitle.value = title;
  packerPopupData.value = columns;
  pickerConfirm.value = confirm;
  pickerCancel.value = cancel;
  currentPickValue.value = 0;
  pickerPopup.value?.open();
}
function pickerPopupConfirm() {
  const value = packerPopupData.value[currentPickValue.value || 0];
  pickerConfirm.value(value);
  pickerPopup.value?.close();
}
function pickerPopupCancel() {
  pickerCancel.value();
  pickerPopup.value?.close();
}
function pickChange(evt: any) {
  currentPickValue.value = evt?.detail?.value.toString() - 0 || 0;
}
defineExpose({
  showPickerPopup,
});
</script>

<style lang="scss" scoped></style>
